<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/login.css"/>
    <title>我的课程</title>
</head>
<body>
    <div class="login">
        <div class="login_back">
            <div class="login_box">
                <div class="login_logo imgBox auto">
                    <img src="img/login_logo.png" alt=""/>
                </div>
                <div class="login_input">
                    <ul>
                        <li>
                            <span><i class="icon icon-iphone"></i></span>
                            <input type="text" class="login-phone" placeholder="您的手机号码"/>
                        </li>
                        <li class="yanzhen">
                            <span><i class="icon icon-email"></i></span>
                            <input type="text" class="login-code" placeholder="验证码"/>
                            <div class="get_code">获取验证码</div>
                        </li>
                    </ul>
                    <div class="with_weixin">
                        <label>
                            <input type="checkbox"/>
                            <span class="wei_check"> <i class="icon icon-iconfontcheck"></i></span>
                            <span>绑定微信</span>
                        </label>
                    </div>
                    <div class="btn btn-long login_btn">登陆</div>
                </div>
                <p class="to_register"><a href="#">首次登陆请注册E.life会员</a></p>
            </div>
        </div>
    </div>
    <!--<div class="dialog_tip">-->
        <!---->
    <!--</div>-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        function check(){
            var phone = $(".login-phone"),code = $('.login-code');
            var reg_phone = /^1[3578]\d{9}$/;
            var sub = $('.login_btn');
            sub.on('touchstart',function(e){
                e.preventDefault();
                if(phone.val() == ''){
                    tip('手机号不能为空');
                    return false;
                }else{
                    if(!reg_phone.test(phone.val())){
                        tip('手机号码格式错误');
                        return false;
                    }else{

                    }
                }
                if(code.val() == ''){
                    tip('请输入验证码');
                    return false;
                }

            });
            count(3);
            function count(s){
                var tar = $('.get_code'), time = null;
                tar.on('touchstart',function(){
                    if(phone.val() == ''){
                        tip('手机号不能为空');
                        return false;
                    }else{
                        if(!reg_phone.test(phone.val())){
                            tip('手机号码格式错误');
                            return false;
                        }
                    }
                    var _this = $(this), i = s ,cell = arguments.callee;
                    tar.addClass('on').off('touchstart');
                    tar.text(i + 's');
                    time = setInterval(function(){
                        i--;
                        if(i <= -1){
                            clearInterval(time);
                            time = null;
                            tar.removeClass('on').text('获取验证码').on('click',cell);
                            return;
                        }
                        tar.text(i+ 's');
                    },1000);
                })
            }
        }
        check();

        function tip(title){
            if($(".dialog_tip").length){
                $(".dialog_tip").remove();
            }
            var tips = $('<div class="dialog_tip"></div>');
            var p = $('<p>'+title+'</p>');
            tips.append(p);
            $('body').append(tips);
            setTimeout(function(){
                tips.remove();
            },2000);
        }
    </script>
</body>
</html>